/* Flex 弹性布局 */
@mixin flex($direction: row, $align: center, $justify: center, $wrap: nowrap) {
  display: flex;
  flex-direction: $direction;
  align-items: $align;
  justify-content: $justify;
  flex-wrap: $wrap;
}

/* 箭头 */
@mixin arrow($width: 48, $color: #999, $size: 2, $rotate: 45) {
  width: #{$width / 1.5}px;
  height: #{$width}px;
  overflow: hidden;
  &::before {
    content: '';
    width: #{$width * .4}px;
    height: #{$width * .4}px;
    box-sizing: border-box;
    border-top: #{$size}px solid $color;
    border-right: #{$size}px solid $color;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(#{$rotate}deg);
  }
}

/* 关闭图标 */
@mixin close($size: 88px, $color: #999) {
  width: #{$size};
  height: #{$size};
  &::before {
    content: '';
    width: 40%;
    height: 2px;
    background-color: $color;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
  }
  &::after {
    content: '';
    width: 2px;
    height: 40%;
    background-color: $color;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
  }
}

@mixin scroll($size: 6) {
  /*定义滚动条样式（高宽及背景）*/
  &::-webkit-scrollbar {
    width: #{$size}px; 
    height: #{$size}px;  /* 滚动条宽度， width：对应竖滚动条的宽度  height：对应横滚动条的高度*/
  }
  /*定义滚动条轨道（凹槽）样式*/
  &::-webkit-scrollbar-track {
    background-color: rgba(255,255,255,0.5);  //设置背景透明
    border-radius: #{$size / 2}px;
  }
  /*定义滑块 样式*/
  &::-webkit-scrollbar-thumb {
    border-radius: #{$size / 2}px;
    height: 100px;    /* 滚动条滑块长度 */
    background-color: #ccc;
  }
}

@mixin clamp($clamp: 2) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $clamp;
}